// 博客功能全局样式
// 主题配色（符合设计文档 9.2）
:root {
  --primary-color: #3498db; // 强调色，用于按钮/链接
  --accent-color: #e74c3c; // 强调提示
  --bg-color: #f8f9fa; // 背景色
  --text-color: #2c3e50; // 文字主色
  --muted-text: #7f8c8d; // 辅助文字
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --draft-color: #95a5a6;

  /* 覆盖 Element Plus 主题主色 */
  --el-color-primary: var(--primary-color);
}

/* 在博客页面范围内再次覆盖，避免主站主题影响 */
.blog-theme {
  --el-color-primary: var(--primary-color);
  --el-color-success: var(--success-color);
  --el-color-warning: var(--warning-color);
}

.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.blog-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}

.blog-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;

  .blog-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .blog-info {
    flex: 1;

    .blog-author {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .blog-meta {
      font-size: 12px;
      color: #999;

      span {
        margin-right: 10px;
      }
    }
  }
}

.blog-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  cursor: pointer;

  &:hover {
    color: #409eff;
  }
}

.blog-excerpt {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-tags {
  margin-bottom: 15px;

  .tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f2f5;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    margin-right: 8px;
    margin-bottom: 5px;
    cursor: pointer;

    &:hover {
      background: #e6f7ff;
      color: #409eff;
    }
  }
}

.blog-stats {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;

  .stat-item {
    display: flex;
    align-items: center;
    margin-right: 15px;
    cursor: pointer;

    &:hover {
      color: #409eff;
    }

    i {
      margin-right: 4px;
    }
  }
}

.blog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;

  .el-button {
    margin-left: 10px;
  }
}

.blog-sidebar {
  .sidebar-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;

    .sidebar-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }
  }
}

.blog-tag-cloud {
  .tag-item {
    display: inline-block;
    padding: 4px 12px;
    background: #f0f2f5;
    border-radius: 16px;
    font-size: 13px;
    color: #666;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background: #e6f7ff;
      color: #409eff;
      transform: translateY(-2px);
    }

    &.active {
      background: #409eff;
      color: #fff;
    }
  }
}

.blog-author-list {
  .author-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .author-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .author-info {
      flex: 1;

      .author-name {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 2px;
      }

      .author-meta {
        font-size: 12px;
        color: #999;
      }
    }

    .follow-btn {
      font-size: 12px;
    }
  }
}

.blog-article-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 20px 0 10px;
    font-weight: 600;
    line-height: 1.4;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 16px;
  }

  h6 {
    font-size: 14px;
  }

  p {
    margin-bottom: 15px;
  }

  a {
    color: #409eff;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
    border-radius: 4px;
  }

  blockquote {
    margin: 15px 0;
    padding: 10px 15px;
    background: #f9f9f9;
    border-left: 4px solid #409eff;
    color: #666;
  }

  code {
    padding: 2px 4px;
    background: #f5f5f5;
    border-radius: 3px;
    font-family: Consolas, Monaco, "Andale Mono", monospace;
    font-size: 14px;
  }

  pre {
    margin: 15px 0;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
    overflow-x: auto;

    code {
      padding: 0;
      background: transparent;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;

    th,
    td {
      padding: 8px 12px;
      border: 1px solid #ddd;
      text-align: left;
    }

    th {
      background: #f5f5f5;
      font-weight: 600;
    }
  }

  ul,
  ol {
    margin-bottom: 15px;
    padding-left: 25px;

    li {
      margin-bottom: 5px;
    }
  }
}

.blog-comment-list {
  .comment-item {
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .comment-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .comment-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 10px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .comment-info {
        flex: 1;

        .comment-author {
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 2px;
        }

        .comment-time {
          font-size: 12px;
          color: #999;
        }
      }

      .comment-actions {
        .el-button {
          padding: 0;
          font-size: 12px;
        }
      }
    }

    .comment-content {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 10px;
      margin-left: 42px;
    }

    .comment-footer {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
      margin-left: 42px;

      .action-item {
        display: flex;
        align-items: center;
        margin-right: 15px;
        cursor: pointer;

        &:hover {
          color: #409eff;
        }

        i {
          margin-right: 4px;
        }
      }
    }

    .reply-list {
      margin-top: 10px;
      margin-left: 42px;
      padding-left: 20px;
      border-left: 2px solid #f0f0f0;

      .reply-item {
        padding: 10px 0;

        .reply-header {
          display: flex;
          align-items: center;
          margin-bottom: 5px;

          .reply-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 8px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .reply-info {
            flex: 1;

            .reply-author {
              font-size: 13px;
              font-weight: 500;
              margin-bottom: 2px;
            }

            .reply-time {
              font-size: 11px;
              color: #999;
            }
          }
        }

        .reply-content {
          font-size: 13px;
          line-height: 1.5;
          margin-bottom: 5px;
          margin-left: 32px;
        }

        .reply-footer {
          display: flex;
          align-items: center;
          font-size: 11px;
          color: #999;
          margin-left: 32px;

          .action-item {
            display: flex;
            align-items: center;
            margin-right: 12px;
            cursor: pointer;

            &:hover {
              color: #409eff;
            }

            i {
              margin-right: 3px;
            }
          }
        }
      }
    }
  }
}

.blog-editor {
  .editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;

    .toolbar-group {
      display: flex;
      margin-right: 15px;
      margin-bottom: 5px;

      .toolbar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-right: 5px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
          background: #f0f0f0;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .editor-content {
    min-height: 400px;
    padding: 15px;
  }

  .editor-preview {
    min-height: 400px;
    padding: 15px;
    border-left: 1px solid #ddd;
  }
}

.blog-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.blog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;

  .empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
  }

  .empty-text {
    font-size: 16px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .blog-container {
    padding: 15px;
  }

  .blog-card {
    padding: 15px;
  }

  .blog-header {
    .blog-avatar {
      width: 32px;
      height: 32px;
    }

    .blog-info {
      .blog-author {
        font-size: 14px;
      }

      .blog-meta {
        font-size: 11px;
      }
    }
  }

  .blog-title {
    font-size: 16px;
  }

  .blog-excerpt {
    font-size: 13px;
  }

  .blog-stats {
    font-size: 11px;

    .stat-item {
      margin-right: 10px;
    }
  }

  .blog-sidebar {
    margin-top: 20px;
  }

  .blog-article-content {
    font-size: 15px;

    h1 {
      font-size: 20px;
    }

    h2 {
      font-size: 18px;
    }

    h3 {
      font-size: 16px;
    }
  }

  .blog-comment-list {
    .comment-item {
      .comment-content {
        margin-left: 0;
      }

      .comment-footer {
        margin-left: 0;
      }

      .reply-list {
        margin-left: 0;
        padding-left: 15px;

        .reply-content {
          margin-left: 0;
        }

        .reply-footer {
          margin-left: 0;
        }
      }
    }
  }

  .blog-editor {
    .editor-toolbar {
      .toolbar-group {
        margin-right: 10px;

        .toolbar-btn {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
}

.toolbar-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px; // 调整搜索框与分类按钮之间的距离
}

.quick-cats {
  margin-top: 8px; // 增加分类按钮与搜索框的间距
}

.hot-list {
  display: flex;
  flex-direction: column;
  gap: 8px; // 增加热门文章之间的间距
}

.hot-item {
  display: flex;
  align-items: center;
  padding: 8px 12px; // 增加内边距使内容更舒适
  border-radius: 4px; // 添加圆角
  background-color: #f9f9f9; // 添加背景色以区分内容
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #e6f7ff; // 鼠标悬停时高亮显示
  }
}

.hot-index {
  font-size: 14px;
  font-weight: bold;
  color: #3498db; // 使用强调色
  margin-right: 8px;
}

.hot-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // 防止标题过长导致布局问题
}
.author-list {
  display: flex;
  flex-direction: column;
  gap: 12px; // 增加作者之间的间距
}

.author-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px; // 添加圆角
  background-color: #f9f9f9; // 添加背景色以区分内容
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #e6f7ff; // 鼠标悬停时高亮显示
  }
}

.author-meta {
  flex: 1;
  margin-left: 12px;
}

.name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.el-avatar {
  border: 2px solid #3498db; // 添加边框以突出头像
}

.el-button {
  font-size: 14px;
  padding: 6px 12px;
}
